import {
    ref,
    onMounted,
    onUnmounted
} from 'vue';

// 创建全局响应式变量
export const isMobile = ref(false);
let resizeListener = null;

// 判断是否是移动端
export const setIsMobile = () => {
    // 使用768px作为移动端和PC端的断点
    if (typeof window !== 'undefined' && document.documentElement) {
        isMobile.value = document.documentElement.clientWidth <= 1023;
    }
    // #ifdef APP-PLUS
    // App环境下默认为移动端
    else {
        isMobile.value = true;
    }
    // #endif
};

// 初始化设备检测
setIsMobile();

// 添加窗口大小变化监听
if (typeof window !== 'undefined') {
    resizeListener = () => {
        setIsMobile();
    };
    window.addEventListener('resize', resizeListener);
}

// 清理事件监听器
export const cleanup = () => {
    if (typeof window !== 'undefined' && resizeListener) {
        window.removeEventListener('resize', resizeListener);
        resizeListener = null;
    }
};

/**
 * 设备检测和屏幕监听hook
 * 根据屏幕宽度判断是否为移动端
 */
export function useDeviceDetection() {
    // 组件挂载时确保初始化
    onMounted(() => {
        setIsMobile();
    });
    
    // 组件卸载时不需要移除全局监听，因为可能其他组件还在使用
    
    return {
        isMobile,
        setIsMobile
    };
}

export default useDeviceDetection;